<!DOCTYPE html>
<html>
<meta charset="utf-8"> 
<head>
	<title data-localize="statistics_error.buganalysisone">异常分析一</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">

<style type="text/css">
.u-container{
	position: relative;
	width: 100%;
	height: 140px;
	margin: 0 auto;
	margin-top: 40px;
	overflow-x: hidden;
	overflow-y: auto;
}
.u-container .machine:hover{
	background: #29abe2;
}
.u-container p{
	display: none;
}
.machine{
	float: left;
	height: 130px;
	text-align: center;
}
.machine img{
	height: 100%;
}
.undone{
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    background: #d0d0d0;
}
.u-datacon{
	position: relative;
	width: 100%;
	height: 840px;
}
.u-leftline{
	position: relative;
	width: 50%;
	height: 540px;
	float: left;
}
.u-chartcon{
	position: relative;
	float: left;
	width: 900px;
	height: 900px;
	margin-top: 40px;
	margin-left: 100px;
	text-align: center;
	overflow: hidden;
}
.u-chart{
	position: relative;
	float: left;
	width: 100%;
	height: 300px;
	margin: 172px 0 0 26px;
	border-left: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
.u-chartleft{
	position: absolute;
	display: block;
	height: 100%;
	width: 20px;
	left: -22px;
	top: 0;
}
.u-changetime{
	width: 100%;
	height: 30px;
}
.u-changetime input.datainp{
	text-indent: 7px;
	height: 27px;
	width: 170px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	border: 1px solid #d0d0d0;
	margin-left: 4px;
}
.u-start{
	float: left;
	margin-left: 90px;
}
.u-start label,.u-end label{
	display: inline-block;
	text-align: left;
	width: 100px;
}
.u-end{
	float: left;
	margin-left: 10px;
}
.u-auto{
	line-height: 27px;
}
.u-chartbottom{
	position: absolute;
	display: block;
	width: 40px;
	height: 20px;
	line-height: 20px;
	margin: 0;
	left: -30px;
	bottom: -22px;
}
.u-chartbars{
	float: left;
	position: relative;
	height: 100%;
	width: 20px;
	margin-left: 20px;
	-webkit-transform: rotateX(180deg);
}
.u-chartbars .u-mname{
	position: absolute;
	left: -15px;
	top: -16px;
	line-height: 16px;
	width: 50px;
	font-size: 12px;
	-webkit-transform: rotateX(-180deg);
}
.u-product{
	float: left;
	height: 46px;
	width: 100%;
	bottom: 0;
	left: 0;
	background: #f5d73e;
}
.u-break{
	float: left;
	width: 100%;
	height: 20px;
	background: #f44336;
}
.u-error{
	float: left;
	width: 100%;
	height: 20px;
	background: #009fff;
}
.u-chartbars:nth-child(1) .u-product{
	height: 70%;
}
.u-chartbars:nth-child(2) .u-product{
	height: 20%;
}
.u-chartbars:nth-child(3) .u-product{
	height: 50%;
}
.u-chartbars:nth-child(4) .u-product{
	height: 90%;
}
.u-chartbars:nth-child(5) .u-product{
	height: 40%;
}
.u-xm{
	width: 100%;
	margin-top: 20px;
	text-align: left;
}
.u-xm label{
	width: 100px;
	display: inline-block;
}
.u-xm select{
	width: 170px;
	height: 30px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	border: 1px solid #d0d0d0;
}
</style>
<link rel="stylesheet" type="text/css" href="css/machine.css">
</head>
<body>
<div class='u-head'>
   <div class="u-headcon">
	<a href="index.html"><div class="u-mainpage" data-localize="statistics_error.backindex">回到首页</div></a>
	<h3 data-localize="statistics_error.buganalysisone">异常分析一</h3>
	   <div class="changeLang">
		   <p class="u-lang"><span>中文</span><span>English</span></p>
		   <div isopen="true" class="changeLangBtn"></div>
	   </div>
</div>
</div>

<div class="u-datacon">
	<div class="u-chartcon" style="overflow: visible;">
		<div class="u-changetime">
			<div class="u-start"><label data-localize="statistics_error.begintime">开始时间</label><input type="text" class="datainp startDate" readonly/></div>
			<div class="u-end"><label data-localize="statistics_error.endtime">结束时间</label><input type="text" class="datainp endDate" readonly/></div>
		</div>
		<div class="u-xm">
			<label style="margin-left: 90px;" data-localize="statistics_error.line">产线</label>
			<select class="u-selectLine">
			</select>
			<label style="margin-left: 10px;" data-localize="statistics_error.equipment">设备</label>
			<select class="selectpicker bla bla bli u-equipment" id="u-eqno" multiple data-live-search="true">
			<option value="bb">aa</option>
		  	</select>
			<br>
			<br>
			<label style="margin-left: 90px;">PartNo</label>
			<select class="selectpicker2 bla bla bli u-partno" id="u-partno" multiple data-live-search="true">
		  	</select>
			<a class="u-downloadCSV" id="downloadCSV" style="margin-left: 10px;"><div class="u-btnblue" data-localize="statistics_error.downloadCSV">导出CSV</div></a>
			<div class="u-btnblue u-confirmbtn" data-localize="statistics_error.confirm">确认</div>
		</div>
		<div id='canvasDiv'></div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.localize.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/language_cookie.js" charset="utf-8"></script>
<script type="text/javascript" src="js/ichart.1.2.1.min.js"></script>
<script type="text/javascript" src="js/jedate.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script type="text/javascript">

var csvData;
var labela = [];
var tavg = [];
var data = [
 	{
 		name : '',
 		value:[null,null,null],
 		color:''
 	}
];
$(function() {
    csvData = {
        header: ['产线ID','设备ID','设备名','部件名','部件值'],
        body: []
    };

	var chart = new iChart.ColumnMulti2D({
		render: 'canvasDiv',
		animation:false,
		animation_duration:'500',
		data: data,
		align: 'left',
		width: 1080,
		height: 460,
		shadow: false,
		offsetx:120,
		background_color: '#ffffff',
		z_index: 10,
		legend:{
			enable:true,
			background_color : null,
			border : {
				enable : false
			}
		},
		labels:labela,
		label:{
			textAlign:'right',
			textBaseline:'middle',
			rotate:-45,
			offsetx:-20
		},
		coordinate: {
			width: 620,
			height: 260,
			striped_factor: 0.18,
			gridlinesVisible:false,
			grid_color: '#4e4e4e',
			axis: {
				color: '#252525',
				width: [0, 0, 2, 2]
			},
			scale: [{
				position: 'left',
				scale_share:5,
				label: {
					color: '#333333',
					font: '微软雅黑',
					fontsize: 11,
					fontweight: 600
				},
				scale_color: '#9f9f9f'
			}]
		}
	});
	//利用自定义组件构造左侧说明文本
	chart.plugin(new iChart.Custom({
		drawFn: function() {
			//计算位置
				var avg = tavg;
				var coo = chart.getCoordinate(),
				x = coo.get('originx'),
				y = coo.get('originy'),
				w = coo.width,
				h = coo.height,
				S = coo.getScale('left'),
				Smin = S.values[0],
				Smax = S.values[S.values.length-1],
				h1,y1;
			for (var i = 0,len = avg.length; i < len; i++) {
		       (function(i){
		    		h1 = (parseInt(avg[i].UPPER_LIMIT) - Smin) * h / Smax;

					y1 = chart.y + h - h1;
					if (y1) {
						chart.target.line(x,y1,x+w,y1,1,'#252525')
						.textAlign('start')
						.textBaseline('left')
						.textFont('600 12px Verdana')
						.fillText('part'+avg[i].PART_NO,x+w+5,y1,false,'#252525');
					}
		       })(i); 
		    }
		}
	}));
	chart.draw();
	jeDate({
        dateCell:".endDate",
        format:"YYYY-MM-DD hh:mm:ss",
        isinitVal:true,
        isTime:true, //isClear:false,
        minDate:"2014-09-19 00:00:00"
    });
    jeDate({
        dateCell:".startDate",
        format:"YYYY-MM-DD hh:mm:ss",
        isinitVal:true,
        isTime:true, //isClear:false,
        minDate:"2014-09-19 00:00:00"
    });
    var lineurl = getUrl('statistics_getLine'),
    	equrl = getUrl('statistics_getEq'),
    	pnurl = getUrl('statistics_getPN');
    $.ajax({
        type:'get',      
        url: lineurl,
        async : false, 
        dataType: "json", 
        success:function(data){
        	var inhtml = "";
            if (data.resultCode == 200 && data.resultMessage == "OK") {
            	for (var i = 0,len = data.resultObject.length; i < len; i++) {
            		inhtml += '<option value="'+data.resultObject[i].lineId+'">'+data.resultObject[i].lineName+'</option>';
				}
				$('.u-selectLine').append(inhtml);
            }
        },
        error:function(){
            console.log("selectEqByLineId fail");
        }  
    });
    eqRender(equrl);
    $(".u-selectLine").on('change',function(e){
    	eqRender(equrl);
    })
    
    $(".u-equipment").on('change',function(e){
    	var html = "",
    		equi = $(".u-equipment").val(),
    		lineId = $(".u-selectLine").val();
		if (equi) {
			equi = equi.join(",");
		}else{
			return false;
		}
		if (!lineId) {
			return false;
		}
		console.log(equi)
		$.ajax({  
	        type:'get',      
	        url: pnurl,
	        async : false, 
	        dataType: "json",
	        data:{"line":lineId,"eqIds":equi},  
	        success:function(data){
	            if (data.resultCode == 200 && data.resultMessage == "OK") {
	            	for (var i = 0,len = data.resultObject.length; i < len; i++) {
                        if(getCookie("somoveLanguage")=="zh"){
                            html += '<option value="'+data.resultObject[i].partNo+'">'+data.resultObject[i].partNo+'</option>';
                        }else if (getCookie("somoveLanguage")=="en"){
                            html += '<option value="'+data.resultObject[i].partNo+'">'+data.resultObject[i].partNoEn+'</option>';
                        }


					}
					console.log(data);
	            }
	        },
	        error:function(){
	            console.log("selectPartNoById fail");
	        }  
	    });
    	$('#u-partno').empty();
    	if (html) {
    		$('#u-partno').append(html);
    		$('#u-partno').append('</optgroup>');
    		$('#u-partno').selectpicker('refresh');
    	}else{
    		$('#u-partno').empty();
    	}
	});
	//开始画图
	$('#u-eqno').selectpicker({
        'selectedText': '1'
    });
    $('#u-partno').selectpicker({
        'selectedText': '1'
    });

	$('.u-confirmbtn').click(function(){

		var aaa = [0],bbb = [0];
		var url = getUrl('statistics_error'),
			line,startDate,endDate,parts,eqids;
		line = $(".u-selectLine").val();
		data = [
		 	{
		 		name : '',
		 		value:[null,null,null],
		 		color:''
		 	}
		];
		csvData['body'] = [];
		if (!line) {
			return false;
		}
		startDate = $('.startDate').val();
		endDate = $('.endDate').val();
		parts = $('#u-partno').val();
		eqids = $('#u-eqno').val();
		if (parts) {
			parts = parts.join(",");
		}
		if (eqids) {
			eqids = eqids.join(",");
		}
		console.log(line,startDate,endDate,eqids,parts);
		var mes = getData(line,startDate,endDate,eqids,parts,url);
// 		var mes = {
//   "resultCode": 200,
//   "resultMessage": "OK",
//   "resultObject": {
//     "limitList": [
//       {
//         "PART_NO": "上料机-no_1",
//         "UPPER_LIMIT": 230
//       },
//       {
//         "PART_NO": "印刷机一-no_1",
//         "UPPER_LIMIT": 100
//       },
//       {
//         "PART_NO": "印刷机一-no_1",
//         "UPPER_LIMIT": 100
//       }
//     ],
//     "deviceList": [
//       {
//         "eqId": "A1",
//         "eqName": "上料机",
//         "list": [
//           {
//             "partNo": "no_1",
//             "total": "303"
//           }
//         ]
//       },
//       {
//         "eqId": "A2",
//         "eqName": "印刷机一",
//         "list": [
//           {
//             "partNo": "no_1",
//             "total": "337"
//           }
//         ]
//       },
//       {
//         "eqId": "A2",
//         "eqName": "印刷机一",
//         "list": [
//           {
//             "partNo": "no_1",
//             "total": "337"
//           }
//         ]
//       }
//     ]
//   }
// };
		console.log(mes);
		var aaalist = [];
		var deviceLen = mes.resultObject.deviceList?mes.resultObject.deviceList.length:0;
		labela.splice(0,labela.length);
		for (var j = 0,len2 = mes.resultObject.deviceList?mes.resultObject.deviceList.length:0; j < len2; j++){
		    if(getCookie("somoveLanguage")=="zh"){
                labela[j] = mes.resultObject.deviceList[j].eqName;
            }else if (getCookie("somoveLanguage")=="en"){
                labela[j] = mes.resultObject.deviceList[j].eqNameEn;
            }

			if (mes.resultObject.deviceList[j].list) {
				for (var b = 0,lenb = mes.resultObject.deviceList[j].list.length; b < lenb; b++) {
					aaalist.push([mes.resultObject.deviceList[j].list[b].total,j]);
                    if(getCookie("somoveLanguage")=="zh"){
                        csvData['body'].push([line,String($('#u-eqno').val()),String($('.u-equipment').find('button').attr('title')),mes.resultObject.deviceList[j].eqName+mes.resultObject.deviceList[j].list[b].partNo,mes.resultObject.deviceList[j].list[b].total]);
                    }else if (getCookie("somoveLanguage")=="en"){
                        csvData['body'].push([line,String($('#u-eqno').val()),String($('.u-equipment').find('button').attr('title')),mes.resultObject.deviceList[j].eqNameEn+mes.resultObject.deviceList[j].list[b].partNo,mes.resultObject.deviceList[j].list[b].total]);
                    }
				}
			}
		}
		tavg.splice(0,tavg.length);
		for (var i = 0,len = mes.resultObject.limitList?mes.resultObject.limitList.length:0; i < len; i++) {
            if(getCookie("somoveLanguage")=="zh"){
                tavg[i] = {'PART_NO': mes.resultObject.limitList[i].PART_NO,'UPPER_LIMIT': mes.resultObject.limitList[i].UPPER_LIMIT};

                aaa = Array(len).fill(null);

                aaa[aaalist[i][1]] = aaalist[i][0];

                data[i] = {
                    name : mes.resultObject.limitList[i].PART_NO,
                    value: aaa,
                    color: getRandomColor()
                };
            }else if (getCookie("somoveLanguage")=="en"){
                tavg[i] = {'PART_NO': mes.resultObject.limitList[i].PART_NO_EN,'UPPER_LIMIT': mes.resultObject.limitList[i].UPPER_LIMIT};

                aaa = Array(len).fill(null);

                aaa[aaalist[i][1]] = aaalist[i][0];

                data[i] = {
                    name : mes.resultObject.limitList[i].PART_NO_EN,
                    value: aaa,
                    color: getRandomColor()
                };
            }

		}


		console.log(csvData);
		chart.load(data);
	})
	$('.u-downloadCSV').click(function(){
		var obj = document.getElementById('downloadCSV');

		csvDownload('异常分析一',obj,csvData);
	});


});

function eqRender(url){
	var lineId = $(".u-selectLine").val();
	if (!lineId) {
		return false;
	}
	$('#u-eqno').empty();
	$.ajax({  
        type:'get',      
        url: url,
        async : false, 
        dataType: "json",
        data:{"line":lineId},  
        success:function(data){
        	var inhtml = "";
            if (data.resultCode == 200 && data.resultMessage == "OK") {
            	for (var i = 0,len = data.resultObject.length; i < len; i++) {
                    if(getCookie("somoveLanguage")=="zh"){
                        inhtml += '<option value="'+data.resultObject[i].equipmentId+'">'+data.resultObject[i].equipmentName+'</option>';
                    }else if (getCookie("somoveLanguage")=="en"){
                        inhtml += '<option value="'+data.resultObject[i].equipmentId+'">'+data.resultObject[i].equipmentNameEn+'</option>';
                    }

				}
				$('#u-eqno').append(inhtml);
				$('#u-eqno').append('</optgroup>');
				$('#u-eqno').selectpicker('refresh');
            }
        },
        error:function(){
            console.log("selectEqByLineId fail");
        }  
    });
}
function getData(line,startDate,endDate,eqIds,parts,url){
    var res = null;
    $.ajax({  
        type:'get',      
        url: url,
        async : false, 
        dataType: "json",
        data:{"line":line,"startDate":startDate,"endDate":endDate,"parts":parts,"eqIds":eqIds},
        success:function(data){
            if (data.resultCode == 200 && data.resultMessage == "OK") {
                res = data;
            }
        },
        error:function(){
            console.log("fail");
        }  
    });
    return res;
}
</script>

</body>
</html>